<template>
  <v-dialog
    v-model="visible"
    width="350"
  >
    <v-card title="酷狗搜索">
      <v-card-text>
        <v-text-field
          class="mb-2"
          v-model="keyword"
          density="compact"
          variant="solo"
          label="请输入搜索歌曲"
          append-inner-icon="mdi-magnify"
          single-line
          hide-details
          @click:append-inner="onSearch"
          @keyup.enter="onSearch"
          ></v-text-field>
          <div class="h-40">
            <v-list v-if="songs.length" class="h-full" border rounded elevation="2">
              <v-list-item
                v-for="(item, idx) in songs"
                :key="idx" :value="item" :active="song.id==item.id"
                @click="song=item"
              >
                <v-list-item-title>
                  {{item.author}} - {{ item.name }}
                </v-list-item-title>
              </v-list-item>
            </v-list>
            <div v-else class="wh-full flex-col flex-cc">
              <v-icon icon="mdi-delete-empty-outline" color="grey" size="64"></v-icon>
              <div class="text-gray text-sm">暂无数据</div>
            </div>
          </div>
      </v-card-text>
      <v-card-actions class="flex-bc">
        <v-btn color="primary" @click="visible=false">关闭</v-btn>
        <v-btn color="primary" @click="confirm">确认</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
import {useVModel} from '@/hooks/useVModel';
import { searchSong } from '@/apis/kgApi';

const props=defineProps<{
  modelValue:boolean;
}>()
const emit=defineEmits<{
  (e: 'update:modelValue',val:boolean): void;
  (e: 'select',val:any):void;
}>()

const visible=useVModel(props,'modelValue',emit);
const keyword=ref(''),songs=ref<any>([]),song=ref<any>({});

const onSearch=() =>{
  if(!keyword.value) return;
  song.value={};
  searchSong(keyword.value).then(data =>{
    songs.value=data.lists.map((v:any) =>{
      return {
        id:v.EMixSongID,
        name:v.SongName,
        author:v.SingerName,
        _active:false
      }
    })
    song.value=songs.value[0];
  })
}
const confirm=() =>{
  emit('select',song.value);
  visible.value=false;
}
</script>

<style scoped>

</style>